<script lang="ts">
import { defineComponent, PropType, ref } from 'vue';
import router from '@/router';
import { updateRemoteOJProblem } from '@/api/problem';
import { getTaskState } from '@/api/user';
import { message } from 'ant-design-vue';
import { STATIC_URL } from '@/config/config';


export interface OjViewCardProps {
  id: number;
  name: string;
  picture: string;
  baseurl: string;
  description: string;
}

export default defineComponent({
  name: 'OjViewCard',
  props: {
    onlineJudge: {
      type: Object as PropType<OjViewCardProps>,
      required: true,
    }
  },
  setup(props) {
    const isUpdateProblem = ref<boolean>(false);
    const taskId = ref<string>('');
    const handleButtonClick = async () => {
      try {
        isUpdateProblem.value = true;

        const response = await updateRemoteOJProblem(props.onlineJudge.id) as { task: string };
        taskId.value = response.task;
        const checkInterval = 3000; // 每3秒检查一次

        const checkTaskStatus = async () => {
          const taskStatusResponse = await getTaskState(taskId.value) as {
            result: string,
            info: { status: string, reason?: string }
          };
          if (taskStatusResponse.result === 'SUCCESS') {
            clearInterval(taskStatusChecker);
            isUpdateProblem.value = false;
            message.success(`${props.onlineJudge.name} 任务执行完成`);
          } else if (taskStatusResponse.info.status === 'failed') {
            isUpdateProblem.value = false;
            message.error(`${props.onlineJudge.name}执行任务出错`);
            clearInterval(taskStatusChecker);
          }
        };
        const taskStatusChecker = setInterval(checkTaskStatus, checkInterval);

      } catch (error) {
        isUpdateProblem.value = false;
        message.error(`${props.onlineJudge.name} 执行任务出错`);
      }
    };
    return {
      isUpdateProblem,
      handleButtonClick,
    };
  },
  methods: {
    STATIC_URL() {
      return STATIC_URL;
    },
    onlineJudgePictureClick(url: string) {
      window.open(url, '_blank');
    },
    onclickCheck(id: number) {
      router.push({
        name: 'AdminProblem',
        params: {
          remote: id
        }
      });
    },
    onclickGet(id: number) {
      router.push({
        name: 'AdminAddProblemFromRemoteDetail',
        params: {
          remote: id
        }
      });
    }
  }
});

</script>

<template>
  <div class="card border-secondary mb-3" style="">
    <div class="card-header">
      题库名称: {{ onlineJudge.name }}
    </div>
    <div class="card-body">
      <a @click="onlineJudgePictureClick(onlineJudge.baseurl)">
        <div class="image-container" style="width: 90%;height: 10rem;">
          <img
            :src= "STATIC_URL()+onlineJudge.picture" class="card-img-top w-100 d-block image-centered"
            :alt="onlineJudge.name"
            style="max-width: 100%;max-height: 100%; vertical-align: middle;display: table-cell;">
        </div>
      </a>
      <div class="card-text" style="width: 100%;">
        <button class="btn btn-outline-primary m-2" @click="onlineJudgePictureClick(onlineJudge.baseurl)">Go
          {{ onlineJudge.name }}
        </button>
        <button class="btn btn-outline-primary m-2" @click="onclickCheck(onlineJudge.id)"> Check Problem</button>
        <button class="btn btn-outline-primary m-2" @click="onclickGet(onlineJudge.id)"> Get
          Problem
        </button>

        <template v-if="isUpdateProblem">
          <button class="btn btn-outline-primary m-2" type="button" disabled>
            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
            Loading...
          </button>
        </template>
        <template v-else>
          <button class="btn btn-outline-primary m-2" @click="handleButtonClick">
            Update Problem
          </button>
        </template>
        <br>
        <a
          :href="`#${onlineJudge.name}`" class="link text-muted m-2" data-bs-toggle="collapse" role="button"
          aria-expanded="false" style="text-align: right;"
          aria-controls="multiCollapseExample1">详细信息
        </a>
        <div :id="`${onlineJudge.name}`" class="collapse multi-collapse m-2">
          <div class="card card-body">
            {{ onlineJudge.description }}
          </div>
        </div>
      </div>
    </div>

  </div>

</template>

<style scoped>
.image-centered {
  object-fit: cover; /* 图片自适应容器大小 */
  object-position: center; /* 图片上下左右居中 */
  text-align: center;
}

.image-container {
  position: relative; /* 需要设置为相对定位，以便子元素可以绝对定位 */
}
</style>
